<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="900px"
    @close="btnClose"
    >

   <el-row style="margin-bottom: 20px; font-size: 14px">
    <el-col :span="6">
      <span :formatter="formatType">【题型】：{{questionData.questionType}}</span>
    </el-col>
    <el-col :span="6">
      <span>【编号】：{{questionData.id}}</span>
    </el-col>
    <el-col :span="6">
      <span>【难度】：{{questionData.difficulty}}</span>
    </el-col>
    <el-col :span="6">
      <span>【标签】：{{questionData.tags}}</span>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="6">
      <span>【学科】：{{questionData.subjectID}}</span>
    </el-col>
    <el-col :span="6">
   <span>【目录】：{{questionData.catalogID}}</span>
    </el-col>
    <el-col :span="6">
   <span>【方向】：{{questionData.direction}}</span>
    </el-col>
  </el-row>
  <hr>
  <el-row>
     <el-col :span="6">
   <span>【题干】：{{questionData.question}}</span>
    </el-col>
     <el-col>
          <span>选项:&ensp;&ensp;&emsp;（以下选中的选项为正确答案）</span>
        </el-col>
  </el-row>
   <hr>
   <el-row>
        <el-col>
          <span>【参考答案】：{{questionData.subjectID}}</span>
          <el-button  @click="view" type="danger" size="mini">视频答案预览</el-button>
        </el-col>
        <el-col>
          <video controls width="300" height="250" v-if="views" src="videoURL">
          </video>
        </el-col>
      </el-row>
      <hr >
      <el-row>
        <el-col>
          <span>【答案分析】：{{questionData.answerID}}</span>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          <span>【题目备注】:{{questionData.remarks}}</span>
        </el-col>
      </el-row>
      <hr>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary"  @click="btnClose">确 定</el-button>
    </span>
  </el-dialog>

  </template>

<script>
import { questionType } from '@/api/hmmm/constants'
export default {
  name: 'QuestionDialog',
  data () {
    return {
      views: false
    }
  },
  created () {},
  mounted () {

  },
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    questionData: {
      type: Object,
      required: true
    }

  },
  computed: {},
  watch: {},
  methods: {
    btnClose () {
      this.$parent.showDialog = false
      this.views = false
    },
    formatType (row, column, cellValue, index) {
      const obj = questionType.find((item) => {
        return item.value === +cellValue
      })
      return obj === undefined ? '未知' : obj.label
      // console.log(cellValue)
    },
    view () {
      this.views = true
    }
  }
}
</script>

  <style scoped lang='less'></style>
